<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layui表格</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<div class="layui-collapse">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">添加用户</h2>
        <div class="layui-colla-content">
            <form class="layui-form" lay-filter="formtest" id="dataform"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" lay-verify="username" placeholder="请输入" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="text" name="password" lay-verify="pass" placeholder="请输入" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="tel" lay-verify="tel" placeholder="请输入" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">生日</label>
                    <div class="layui-input-block">
                        <input name="shengri" type="text" id="time">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
                <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
            </form>
        </div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">用户管理</h2>
        <div class="layui-colla-content">
            <table id="usertable" lay-filter="userAdminTable"></table>
        </div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">说明</h2>
        <div class="layui-colla-content layui-show">
            我们可以做用户管理，这是其中的一个模块，其他的后续再开发
        </div>
    </div>
</div>

<script src="/layui/layui.js"></script>
<script src="/js/index.js"></script>
<script src="/js/jquery.min.js"></script>
<script>
    layui.use('form', function () {
        var form = layui.form;
        form.verify({
            username: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '用户名不能有特殊字符';
                }
                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if (/^\d+\d+\d$/.test(value)) {
                    return '用户名不能全为数字';
                }
            }

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            , pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ], tel: [
                /^[1][3,4,5,7,8][0-9]{9}$/
                , '手机号无效'
            ]
        });
        form.on('submit(*)', function (data) {
            //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            var index = layer.msg('提交中，请稍后', {icon: 16, time: false, shade: 0.8});
            setTimeout(function () {
                layer.close(index);
                $.ajax({
                    url: 'userSave',
                    data: $("#dataform").serialize(),
                    dataType: "json",
                    cache:false,
                    success: function (data) {
                        console.log(data);
                        console.log("=======");
                        if (data.rs == "250") {
                            layer.msg("提交失败!");
                        } else if (data.rs == "200") {
                            layer.msg("提交成功!");
                        }
                    }
                })
            })
            //return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });

    layui.use('laydate', function () {
        var laydate = layui.laydate;

        laydate.render({
            elem: '#time'
        });
    });

</script>

<script th:inline="none">
    layui.use('table', function () {
        var table = layui.table;
        //第一个实例 换行[] 不然 thymeleaf 渲染会出错
        table.render({
            elem: '#usertable'
            , url: '/userAllTable' //数据接口
            , page: true //开启分页
            ,cellMinWidth: 80
            , cols: [
                [ //表头
                    {field: 'id', title: '编号', sort: true, fixed: 'left'}
                    , {field: 'username', title: '用户名'}
                    , {field: 'shengri', title: '生日'}
                ]
            ],
            done:function (res,curr,count) {
                if(res.msg==""){
                    // layer.msg("提交成功!");
                }
            }
        });

    });
</script>
</body>
</html>